<template>
  <div class="paper-attribute">
    <h2>试卷属性</h2>
    <el-cascader placeholder="选择学科" v-model="formGroup.subjectId" :options="subjectList" :props="{ value: 'code', label: 'name', children: 'child', emitPath: false }" size="medium" @change="getSelectList" />
    <el-select placeholder="选择年级" v-model="formGroup.gradeId" size="medium">
      <el-option v-for="o in selectMap.gradeList" :key="o.id" :value="o.id" :label="o.name" />
    </el-select>
    <el-select placeholder="选择年份" v-model="formGroup.year" size="medium">
      <el-option v-for="o in selectMap.yearList" :key="o.id" :value="o.id" :label="o.name" />
    </el-select>
    <el-cascader
        v-model="formGroup.address"
        placeholder="请选择省市区"
        :props="{
              lazy: true,
              label: 'name',
              value: 'id',
              lazyLoad: lazyLoad,
              checkStrictly: true
            }"
        @change="addressChang"
    />
    <el-select placeholder="选择校区" filterable v-model="formGroup.schoolId" size="medium">
      <el-option v-for="o in schoolData" :key="o.id" :value="o.id" :label="o.name" />
    </el-select>
    <el-select v-if="syncPractice" placeholder="选择学期" v-model="formGroup.season" size="medium">
      <el-option v-for="o in selectMap.termsList" :key="o.id" :value="o.id" :label="o.name" />
    </el-select>
    <el-select v-if="syncPractice" placeholder="选择班型" v-model="formGroup.courseTypeId" size="medium">
      <el-option v-for="o in selectMap.courseTypeList" :key="o.id" :value="o.id" :label="o.name" />
    </el-select>
    <el-select v-if="syncPractice" placeholder="选择类别" v-model="formGroup.exerciseType" size="medium">
      <el-option v-for="o in selectMap.exerciseTypeList" :key="o.id" :value="o.id" :label="o.name" />
    </el-select>
    <el-select v-if="syncPractice" placeholder="选择教材版本" v-model="formGroup.teacherBookVersionId" size="medium">
      <el-option v-for="o in selectMap.bookVersionsList" :key="o.id" :value="o.id" :label="o.name" />
    </el-select>
    <el-select placeholder="选择来源" v-model="formGroup.source" size="medium" v-if="selectMap.sourceList.length > 1 && !syncPractice">
      <el-option v-for="o in selectMap.sourceList" :key="o.id" :value="o.id" :label="o.name" />
    </el-select>
    <h2>试卷排版</h2>
    <div class="paper-typesetting">
      <el-radio-group v-model="formGroup.format" @change="formatChange">
        <el-radio :label="1">普通试卷</el-radio>
        <el-radio :label="2">正式试卷</el-radio>
      </el-radio-group>
      <div class="format-child" v-show="formGroup.format === 1">
        <el-checkbox :modelValue="!!formGroup.showTitle" @change="formGroup.showTitle = Number($event)">试卷名称</el-checkbox>
        <el-checkbox :modelValue="!!formGroup.showTime" @change="formGroup.showTime = Number($event)">时间&总分</el-checkbox>
        <el-checkbox :modelValue="!!formGroup.showOrgInfo" @change="formGroup.showOrgInfo = Number($event)">机构信息</el-checkbox>
        <el-checkbox :modelValue="!!formGroup.showStuInfo" @change="formGroup.showStuInfo = Number($event)">考生信息</el-checkbox>
      </div>
      <div class="format-child" v-show="formGroup.format === 2">
        <el-checkbox :modelValue="!!formGroup.showTitle" @change="formGroup.showTitle = Number($event)">试卷名称</el-checkbox>
        <el-checkbox :modelValue="!!formGroup.showTime" @change="formGroup.showTime = Number($event)">时间&总分</el-checkbox>
        <el-checkbox :modelValue="!!formGroup.showOrgInfo" @change="formGroup.showOrgInfo = Number($event)">机构信息</el-checkbox>
        <el-checkbox :modelValue="!!formGroup.showStuInfo" @change="formGroup.showStuInfo = Number($event)">考生信息</el-checkbox>
        <el-checkbox :modelValue="!!formGroup.showScore" @change="formGroup.showScore = Number($event)">大题评分区</el-checkbox>
        <el-checkbox :modelValue="!!formGroup.showSealing" @change="formGroup.showSealing = Number($event)">密封线</el-checkbox>
        <!-- <el-checkbox :modelValue="!!formGroup.showSideTitle" @change="formGroup.showSideTitle = Number($event)">试卷副标题</el-checkbox> -->
        <el-checkbox :modelValue="!!formGroup.showChapterScore" @change="formGroup.showChapterScore = Number($event)">大题分值</el-checkbox>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, reactive, computed, watch, inject } from 'vue';
import store from './../store/index';
import { useStore } from 'vuex';
import $, { emitter } from '$';

const attribute = ['source', 'exerciseType', 'teacherBookVersionId', 'courseTypeId', 'season', 'year', 'gradeId', 'format', 'subjectId', 'provinceId', 'cityId', 'county', 'schoolId']

export default {
  setup() {
    const areaData = [[], [], []]
    const syncPractice = inject('syncPractice', false)
    let baseStore = useStore();

    let subjectList = ref([]);
    $.http.post('/permission/user/userDataSubjects').then(res => subjectList.value = res.json )

    let selectMap: any = reactive({
      gradeList: [{ name: '所有', id: '' }],
      yearList: [{ name: '所有', id: '' }],
      sourceList: [{ name: '所有', id: '' }],
      termsList: [{name: '所有', id: ''}]
    });

    let paperInfo = computed(() => store.state.paperInfo);
    let paperCharpts = computed(() => store.getters.paperCharpts);

    let formGroup: any = reactive({});

    watch(formGroup, (v) => {
      store.commit('set_paper_info', {...paperInfo.value, ...v, paperCharpts: paperCharpts.value})
    })

    const getSelectList = (val?) => {
      let userId = computed(() => baseStore.getters.userInfo.user.id).value;
      $.http.post('/permission/user/userDataRules', { userId, subjectCode: val ? val : formGroup.subjectId }).then(res => {
        selectMap.gradeList = [{ name: '所有', id: '' }, ...res.json.grades];
        selectMap.yearList = [{ name: '所有', id: '' }, ...res.json.years];
        selectMap.courseTypeList = [{ name: '所有', id: '' }, ...res.json.courseTypes];
        selectMap.termsList = [ { name: '所有', id: '' }, ...res.json.terms ]
        selectMap.bookVersionsList = [{ name: '所有', id: ''}, ...res.json.bookVersions];
        selectMap.exerciseTypeList = [ { name: '全部', id: null }, { name: '进门测', id: 1 }, { name: '过手练', id: 2 }, { name: '出门测', id: 3 }, { name: '课堂巩固', id: 4 } ]
        if (val) {
          formGroup.gradeId = '';
          formGroup.year = '';
          formGroup.season = '';
          formGroup.courseTypeId = '';
          formGroup.teacherBookVersionId = '';
          formGroup.exerciseType = '';
        }
      });
    }

    emitter.on('ready', () => {
      attribute.map(key => {
        if (key === 'format' && paperInfo.value[key] == null) {
          formGroup[key] = 1;
        } else if (key === 'subjectId' && paperInfo.value[key] == null) {
          formGroup[key] = $.storage.get('subject').code;
        } else {
          formGroup[key] = paperInfo.value[key]
        }
      });
      formGroup['address'] = [ formGroup.provinceId??='', formGroup.cityId??='', formGroup.county??='' ];
      $.http.post('/system/dictionary/queryDictByCodes', { typeCodesStr: 'QUES_SOURCE' }).then(res => selectMap.sourceList = res.json['QUES_SOURCE'])
      formatChange();
      getSelectList();
      if (formGroup.schoolId) {
        $.http.post('/admin/publicSchool/queryAll', { provinceId: formGroup.provinceId, cityId: formGroup.cityId, areaId: formGroup.county }).then(res => schoolData.value = res.json)
      }
    });

    const formatChange = () => {
      formGroup.showTitle = 1;
      formGroup.showTime = 1;
      formGroup.showOrgInfo = 1;
      formGroup.showStuInfo = 1;
      formGroup.showScore = formGroup.format === 1 ? 0 : 1;
      formGroup.showSealing = formGroup.format === 1 ? 0 : 1;
      formGroup.showSideTitle = formGroup.format === 1 ? 0 : 1;
      formGroup.showChapterScore = formGroup.format === 1 ? 0 : 1;
    }

    const lazyLoad = ({ data }, resolve) => {
      $.http.post('/system/area/queryByParentId', { parentId: data.id ? data.id : null }).then(res => {
        if (!data.id) areaData[0] = res.json;
        else if (res.json.every(i => i.leaf)) areaData[2] = res.json;
        else areaData[1] = res.json;
        resolve(res.json);
      })
    }

    const schoolData = ref([]);
    const addressChang = (e) => {
      $.http.post('/admin/publicSchool/queryAll', { provinceId: e[0], cityId: e[1], areaId: e[2] }).then(res => {
        let names = e.map((i, idx) => (areaData[idx].find((j: any) => j.id === i) as any).name);
        [formGroup.provinceName, formGroup.cityName, formGroup.countyName = ''] = names;
        [formGroup.provinceId, formGroup.cityId, formGroup.county = ''] = e;
        schoolData.value = res.json;
        formGroup.schoolId && (formGroup.schoolId = null);
      })
    }

    return { selectMap, subjectList, formGroup, getSelectList, formatChange, syncPractice, lazyLoad, addressChang, schoolData }
  }
}
</script>
<style lang="scss">
.paper-attribute {
  h2 {
    margin-bottom: 15px;
    line-height: 40px;
    text-align: center;
    background: #F5F7FA;
    border-radius: 4px;
  }
  & > .el-select,
  & > .el-cascader {
    width: 100%;
    margin-bottom: 15px;
  }
  & > .el-select:last-of-type {
    margin-bottom: 30px;
  }
  .paper-typesetting {
    padding: 0 5px;
  }
  .format-child .el-checkbox {
    margin-top: 17px;
    margin-right: 8px;
    &:nth-child(2n) {
      margin-right: 0;
    }
    .el-checkbox__label {
      width: 80px;
    }
  }
}
</style>
